<nz-breadcrumb class="breadcrumb-pos">
  <i nz-icon type="link" theme="outline" style="color:#1890FF;padding-right:4px"></i>
  <nz-breadcrumb-item>
    <a routerLink="/main/acount">账号管理</a>
  </nz-breadcrumb-item>
  <nz-breadcrumb-item>
    添加账号
  </nz-breadcrumb-item>
</nz-breadcrumb>
<div class="form-div">
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="username">账号</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input type="text" nz-input formControlName="username1" autocomplete="off" (keyup)="checkUser()" placeholder="请输入账号6-14位字母或数字组合">
        <nz-form-explain class="checkResult" *ngIf="validateForm.get('username1').dirty && validateForm.get('username1').errors">请输入账号!</nz-form-explain>
        <nz-form-explain class="checkResult" *ngIf="checkUsername==-1">账号格式不正确!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="password">密码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input type="password" nz-input formControlName="pwd1" autocomplete="off" placeholder="请输入密码">
        <nz-form-explain class="checkResult" *ngIf="validateForm.get('pwd1').dirty && validateForm.get('pwd1').errors">请输入密码!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">名称</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input type="text" nz-input formControlName="name" placeholder="请输入角色名称">
        <nz-form-explain class="checkResult" *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">请输入角色名称!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phoneNumber" nzRequired>手机号</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.controls['phoneNumber']">
        <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
          <ng-template #addOnBeforeTemplate>
            <nz-select formControlName="phoneNumberPrefix" style="width: 70px;">
              <nz-option nzLabel="+86" nzValue="+86"></nz-option>
              <nz-option nzLabel="+87" nzValue="+87"></nz-option>
            </nz-select>
          </ng-template>
          <input nz-input formControlName="phoneNumber" id="'phoneNumber'" (blur)="checkMobile()" (focus)="clearCheckMobile()" >
        </nz-input-group>
        <nz-form-explain class="checkResult"  *ngIf="validateForm.get('phoneNumber').dirty && validateForm.get('phoneNumber').errors">
          <ng-container  *ngIf="validateForm.get('phoneNumber').hasError('required')">
              请输入手机号!
          </ng-container>
          <ng-container *ngIf="validateForm.get('phoneNumber').hasError('confirm')">
              手机号格式不正确!
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <!-- <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>状态</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-radio-group [(ngModel)]="radioValue" [ngModelOptions]="{standalone: true}">
            <label nz-radio nzValue="0">正常</label>
            <label nz-radio nzValue="1">禁用</label>
          </nz-radio-group>
      </nz-form-control>
    </nz-form-item> -->

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="remark">分配权限</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" style="text-align:left;">
        <p *ngIf="rolelist.length < 1">无</p>
        <nz-checkbox-group *ngIf="rolelist.length > 0" formControlName="checkOptions" #checkOptions (ngModelChange)="log()"></nz-checkbox-group>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="remark">备注</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input type="text" nz-input formControlName="remark" placeholder="请输入备注">
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nz-row style="margin-bottom:8px;">
      <nz-form-control [nzSpan]="14" [nzOffset]="6" style="text-align:center;">
        <button nz-button nzType="primary" [nzLoading]="btn_loading" (click)="addAcount()" style="margin-right:150px;">添加</button>
        <button nz-button nzType="primary" (click)="backPrevent()" routerLink="/main/acount">返回</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>